<template>
  <div>
     <!-- 头部返回 -->
    <div class="header">
      <van-nav-bar title="京东注册" left-text="返回" left-arrow @click-left="$router.go(-1)"/>
    </div>
    <!-- 注册手机号 -->
    <div class="register">
    <van-form @submit="onSubmit">
    <van-cell-group inset>
    <van-field
      v-model="tel"
      name="tel"
      label="手机号"
      placeholder="填写手机号"
      :rules="[{ validator, message: '请正确填写格式' }]"
      @input="changedis"/>
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" :disabled="isdisable">
      下一步
    </van-button>
  </div>
</van-form>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引用弹窗
import { Dialog } from 'vant';
import {useRouter}from "vue-router"
import {useuserstore} from "../../store/userstore"
import{ref,reactive,} from 'vue'
// 引入手机号是否被注册接口
import{telapi} from "../../api/user"
// 引用pinia中的方法
const userstore =useuserstore()
let router =useRouter()
//定义输入框内容
let tel=ref("")
//判断按钮是否可用
let isdisable=ref(true)
//正则校验格式
const validator = (val:any) =>/^1[3456789]\d{9}$/.test(val);
//通过正则校验的状态改变按钮的状态
let changedis=()=>{
  if(validator(tel.value)){
    isdisable.value=false
  }else{
    isdisable.value=true
  }
}

// 点击下一步按钮
let onSubmit=(values:{tel:string})=>{
  // console.log(tel);
  // console.log(values);
  telapi(values).then((res:any)=>{
    console.log(res);
    if(res.code==200){
      Dialog.confirm({
      title: '提示',
      message:`将向手机号：${tel.value}发送验证码`,
       }).then(() => {
        //  将手机号传入pinia中
       userstore.changetel(tel.value)
        router.push("/register/step2")
      }).catch(() => {
      });
     
    }
    if(res.code==10005){
      Dialog.confirm({
      title: '提示',
      message:`已注册请登录`,
       }).then(() => {
        router.push("/login")
      }).catch(() => {
      });
     
    }
  })
  
  
}


</script>
<style scoped>

</style>